<template>
  <div class="news">
    <div class="card">
      <ul class="list">
        <li class="item" v-for="(item, index) in news" :key="index">
          <div class="tag">{{ item.pubDateStr }}</div>
          <div class="content">
            <div class="title">{{ item.title }}</div>
            <p>{{ item.summary }}</p>
          </div>
          <a :href="item.sourceUrl">&gt;</a>
        </li>
      </ul>
    </div>

    <!-- 静态布局 -->
    <!-- <div class="card">
    <ul class="list">
        <li class="item">
          <div class="tag">10小时前</div>
          <div class="content">
            <div class="title">全国｜新增 9 例确诊</div>
            <p>
              4月23日0—24时，31个省（自治区、直辖市）和新疆生产建设兵团报告新增确诊病例9例，均为境外输入病例（上海3例，江苏1例，广东1例，重庆1例，四川1例，云南1例，陕西1例）；无新增死亡病例；新增疑似病例3例，均为境外输入病例（均在上海）。
            </p>
          </div>
          <a href="">&gt;</a>
        </li>
      </ul>
        </div> -->
  </div>
</template>

<script>
export default {
  props: {
    news: {
      type: Array,
      default: function () {
        return [];
      },
    },
  },
};
</script>

<style scoped>
.news {
  padding: 0.24rem 0.32rem;
  font-size: 0.24rem;
  background-color: #fff;
}

.header {
  margin-bottom: 0.16rem;
  color: #333;
  font-weight: 700;
  font-size: 0.32rem;
  line-height: 0.45rem;
}
.card {
  border-radius: 0.08rem;
  border: 0.01rem solid #ebebeb;
  background: #fff;
  overflow: hidden;
  box-shadow: 0 0.04rem 0.12rem 0 rgba(0, 0, 0, 0.05);
}

.item {
  display: flex;
  justify-content: space-between;
  padding: 0.3rem 0.32rem;
  border-bottom: 1px solid #f1f1f1;
}

.tag {
  width: 1rem;
  display: flex;
  flex: none;
  align-items: center;
  height: 0.34rem;
  margin-top: 0.04rem;
  padding: 0 0.08rem;
  border-radius: 0.04rem;
  background-color: #f74c31;
  color: #fff;
  font-weight: 700;
  font-size: 0.24rem;
  justify-content: center;
}
.content {
  display: flex;
  flex: auto;
  flex-direction: column;
  justify-content: center;
  margin: 0 0.14rem;
}
.title {
  color: #333;
  font-weight: 700;
  font-size: 0.32rem;
  line-height: 0.5rem;
}
.content p {
  margin-top: 0.06rem;
  color: #999;
  font-weight: 400;
  font-size: 0.24rem;
  line-height: 0.34rem;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  word-break: break-all;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

img {
  flex: none;
  align-self: center;
  width: 0.24rem;
  height: 0.24rem;
}
</style>